import React from "react";
import {Card, Select, Form, Button, Table} from "antd";

const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends React.Component {

  state = {};

  componentDidMount() {
    this._requestList();
  }

  _requestList = () => {
    // _requestList () {
    let list = [];

    this.setState({list})
  };

  /**
   * 开通新城市
   */
  handleOpenCity = () => {

  };

  render() {
    const columns = [
      {
        title: '城市 ID',
        dataIndex: 'id',
      }, {
        title: '城市名称',
        dataIndex: 'name'
      }, {
        title: '用车模式',
        dataIndex: 'mode'
      }, {
        title: '运营模式',
        dataIndex: 'op_mode'
      }, {
        title: '授权加盟商',
        dataIndex: 'franchisee_name'
      }, {
        title: '城市管理员',
        dataIndex: 'city_admins'
      }, {
        title: '城市开通时间',
        dataIndex: 'open_time'
      }, {
        title: '操作时间',
        dataIndex: 'data_update'
      }, {
        title: '操作人',
        dataIndex: 'sys_user_name'
      }
    ];

    return (
      <>
        <Card>
          <FilterForm/>
        </Card>

        <Card>
          <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
        </Card>

        <Card>
          <Table
            bordered={true}
            columns={columns}
            dataSource={this.state.list}
          />
        </Card>
      </>
    )
  }
}

class FilterForm extends React.Component {
  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <Form layout="inline">

        <FormItem label="城市">
          {
            getFieldDecorator('city_id')(
              <Select style={{width: 100}} placeholder={"全部"}>
                <Option value="">全部</Option>
                <Option value="1">北京市</Option>
                <Option value="2">天津市</Option>
                <Option value="3">深圳市</Option>
              </Select>
            )
          }
        </FormItem>

        <FormItem label="用车模式">
          {
            getFieldDecorator('mode')(
              <Select
                style={{width: 140}}
                placeholder="全部"
              >
                <Option value="">全部</Option>
                <Option value="1">指定停车点模式</Option>
                <Option value="2">禁停区模式</Option>
              </Select>
            )
          }
        </FormItem>

        <FormItem label="营运模式">
          {
            getFieldDecorator('op_mode')(
              <Select
                style={{width: 80}}
                placeholder="全部"
              >
                <Option value="">全部</Option>
                <Option value="1">自营</Option>
                <Option value="2">加盟</Option>
              </Select>
            )
          }
        </FormItem>

        <FormItem label="加盟授权状态">
          {
            getFieldDecorator('auth_status')(
              <Select style={{width: 100}} placeholder="全部">
                <Option value="">全部</Option>
                <Option value="1">已授权</Option>
                <Option value="2">未授权</Option>
              </Select>
            )
          }
        </FormItem>

        <FormItem>
          <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
          <Button>重置</Button>
        </FormItem>
      </Form>
    )
  }
}

FilterForm = Form.create({})(FilterForm);
